<template>


  <el-row>
    <el-col :span="4">
      <!--左边的分区，人物信息-->
     <el-card>
       <el-table
         :data="tombTable.data"
         max-height="730px"
         height="730px"
         style="width: 100%">

         <el-table-column
           prop="userName"
           label="真实姓名"
         >
           <template slot-scope="scope">
             <span v-if="scope.row.userName === 'UNKNOWN_NAME_DEFAULT'" style="color: darkorange">未知姓名</span>
             <span v-else>{{scope.row.userName}}</span>
             <span v-if="scope.row.nickname">({{scope.row.nickname}})</span>
           </template>
         </el-table-column>

         <el-table-column
           prop="call"
           label="称呼"
         >
         </el-table-column>

       </el-table>

       <!--分页部分-->
       <el-pagination
         style="width:33%; margin-right:10px; margin-top:10px;"
         background
         layout="total, prev, pager, next, jumper"
         @current-change="tombPageCurrentChange"
         :page-size="pageConfig.size"
         :current-page="pageConfig.current"
         :pager-count="5"
         :total="pageConfig.total">
       </el-pagination>
     </el-card>

    </el-col>

    <el-col :span="20">
      <!--右边是嵌入的地图-->
      <iframe :src="iframeUrl" :key="iframeKey"
              width="100%"  height="810px" ></iframe>
    </el-col>
  </el-row>



</template>

<script>

  import http from '@/utils/http'
  // window._AMapSecurityConfig  = {
  //   securityJsCode:'0329a2f5525dd212eb6e341b9e49700a',
  // };

  export default {
    name: "TombList",
    components: {
    },
    data(){
      return {
        // 嵌入页面的标记，防止不刷新用的
        iframeKey: 1,
        // 嵌入页面的默认地址
        iframeUrl: 'https://uri.amap.com/marker',
        // 陵墓信息
        tombTable: {
          // 表格数据
          data: [],
        },
        // 分页参数
        pageConfig: {
          // 每页记录数
          size: 1000,
          // 当前页码
          current: 1,
          // 总记录数
          total: 0,
        },
      }
    },
    methods: {
      /**
       * 标记全部的陵墓
       */
      getAllTomb(){
        if (this.tombTable.data){
          let param = "https://uri.amap.com/marker?markers="
          for (let obj of this.tombTable.data){
            if (obj.tombLongitude && obj.tombLatitude){
              let name = obj.userName
              if ("UNKNOWN_NAME_DEFAULT" === obj.userName){
                name = "未知姓名"
              }
              let mark = obj.tombLongitude + "," + obj.tombLatitude + "," + name + "(" + obj.call + ")陵墓|"
              param = param.concat(mark)
            }

          }
          param = param.concat("&src=mypage&callnative=0")

          this.iframeUrl = param
          this.iframeKey = (this.iframeKey + 1)
        }
      },
      /**
       * 分页被改变的时候
       * @param value 当前页
       */
      tombPageCurrentChange(value){
        this.pageConfig.current = value
        this.getBillingGroupPageList()
      },
      /**
       * 获取陵墓信息
       */
      getTombListPage(){
        http.post("/user/getTombListPage", this.pageConfig).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          // 分页数据
          let data = res.data;
          this.pageConfig.total = data.total;
          this.pageConfig.current = data.current;
          this.pageConfig.size = data.size;
          // 处理数据
          this.tombTable.data = data.records
          this.getAllTomb()

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.getTombListPage()
    }
  }
</script>

<style scoped>

</style>
